<template>
  <div class="toUser-container">
    <!-- 用户信息 -->
    <div class="header user-info">
      <!-- 导航栏 -->
      <div class="navBar">
        <van-icon
          name="arrow-left"
          size="20"
          color="#fff"
          @click="$router.back()"
        />
      </div>

      <div class="base-info">
        <div class="info">
          <div class="left">
            <van-image
              round
              fit="cover"
              class="avatar"
              :src="userInfo.photo"
              @click="showUserImg"
            />
            <span class="text">{{ userInfo.name }}</span>
          </div>
          <div class="right"></div>
        </div>
        <div class="intro" v-if="userInfo.intro">简介:{{ userInfo.intro }}</div>
      </div>
      <div class="data-stats" v-if="!isLoginUser">
        <div class="data-item">
          <div class="count">{{ userInfo.art_count }}</div>
          <div class="text">头条</div>
        </div>
        <div class="data-item" @click="$toast('接口不支持')">
          <div class="count">{{ userInfo.like_count }}</div>
          <div class="text">获赞</div>
        </div>
        <div class="data-item" @click="$toast('接口不支持')">
          <div class="count">{{ userInfo.follow_count }}</div>
          <div class="text">关注</div>
        </div>

        <div class="data-item" @click="$toast('接口不支持')">
          <div class="count">{{ userInfo.fans_count }}</div>
          <div class="text">粉丝</div>
        </div>
      </div>
    </div>

    <div
      class="userArticles"
      :style="isLoginUser ? 'padding-top:200px' : 'padding-top:200px'"
    >
      <van-divider>作者头条文章</van-divider>

      <!-- 用户发表的文章列表 -->
      <van-list
        class=""
        offset="20"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getTargetUserArticles"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
      >
        <article-item
          v-for="(article, index) in list"
          :key="index"
          :article="article"
        />
      </van-list>
    </div>
  </div>
</template>

<script>
import { getTargetUserInfoAPI, getTargetUserArticlesAPI } from '@/api'
import { ImagePreview } from 'vant'
import ArticleItem from '@/components/ArticleItem.vue'

export default {
  components: { ArticleItem },
  name: 'toUserIndex',
  data () {
    return {
      userInfo: {},
      list: [],
      loading: false,
      finished: false,
      error: false,
      page: 1,
      per_page: 20
    }
  },
  computed: {
    isLoginUser () {
      return this.$route.params.isLoginUser
    },
    userId () {
      return this.$route.params.userId
    }
  },
  created () {
    // console.log(this.$route.params) // {isLoginUser: false,userId:xxx}
    this.getTargetUserInfo()
  },
  methods: {
    // 获取目标用户的信息
    async getTargetUserInfo () {
      const { data: res } = await getTargetUserInfoAPI(this.userId)

      // console.log(res)
      this.userInfo = res.data
    },
    // 获取目标用户发表的文章列表
    async getTargetUserArticles () {
      this.loading = true
      try {
        // 1. 请求获取数据
        const { data } = await getTargetUserArticlesAPI({
          target: this.userId,
          page: this.page,
          per_page: this.per_page
        })
        // console.log(data)
        const { results } = data.data
        this.list.push(...results)

        this.loading = false
        // 4. 判断数据是否加载结束
        if (!results.length) {
          this.finished = true
        } else {
          this.page++
        }

        // console.log(this.list.length)
      } catch (err) {
        console.log(err)
        this.error = true
        this.loading = false
      }
    },
    showUserImg () {
      ImagePreview({
        images: [this.userInfo.photo],
        closeable: true
      })
    }
  }
}
</script>

<style scoped lang="less">
.header {
  // height: 381px;
  width: 100%;
  background-image: url('~@/assets/banner.png');
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  .navBar {
    margin-left: 30px;
    margin-top: 20px;
  }
}

.user-info {
  .base-info {
    height: 200px;
    padding: 10px 32px 23px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        justify-content: center;
        align-items: center;

        .avatar {
          width: 120px;
          height: 120px;
          margin-right: 23px;
          border: 2px solid #fff;
        }

        .text {
          color: #fff;
          font-size: 30px;
        }
      }
    }
    .intro {
      color: #fff;
      font-size: 20px;
      margin: 5px 0px;
    }
  }

  .data-stats {
    display: flex;
    .data-item {
      height: 130px;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      .count {
        font-size: 36px;
      }
      .text {
        font-size: 23px;
      }
    }
  }
}

.userArticles {
  width: 100%;
}
</style>
